<template>
  <div>

    <div id="Container">
      <div>
        <!-- 父子传递-->
<!--        <Banner :currentUser="currentUser"></Banner>-->
        <Banner ></Banner>
      </div>
      <div>
        <!-- 搜索-->
        <Search></Search>
      </div>

      <div id="tableDatas">
        <!--         position: fixed; top: 150px;left: 100px;-->
        <!--            style="color: black; width: 1400px;height: 520px;align-content: center;margin: 0px auto;margin-top: -7px; ">-->
        <el-table
            :data="tableData"

            style="color: black; width: 100%;align-content: center;margin: 0px auto;margin-top: -7px; ">
          <el-table-column
              prop="wid"
              label="编号"
              width="155">
          </el-table-column>
          <el-table-column
              prop="account"
              label="账户"
              width="155">
          </el-table-column>
<!--          <el-table-column-->
<!--              prop="name"-->
<!--              label=" 姓名"-->
<!--              width="180">-->
<!--          </el-table-column>-->
          <!--          <el-table-column-->
          <!--              prop="sex"-->
          <!--              label="性别">-->
          <!--          </el-table-column>-->
          <el-table-column label="性别" width="155">
            <template v-slot="scope">
              {{ scope.row.sex === 'M' ? '女性' : '男性' }}
            </template>
          </el-table-column>

          <!--          <el-table-column-->
          <!--              prop="roleInt"-->
          <!--              label="人员类型">-->
          <!--          </el-table-column>-->
          <!-- 从 Vue 2.6 开始，v-slot 可以直接用在组件上或者 <template> 标签上，但是它不能和旧的 slot 或 slot-scope 属性混用-->
          <el-table-column label="人员类型" width="155">
            <template v-slot="scope">
              <!--              {{ scope.row.status === '1' ? '超级管理员' : (scope.row.status === '2'?'开发人员':'普通人') }}-->
              {{ scope.row.status === 1 ? '超级管理员' : (scope.row.status === 2 ? '开发人员' : '普通人') }}
            </template>
          </el-table-column>
          <!--          <el-table-column-->
          <!--              prop="status"-->
          <!--              label="状态">-->
          <!--          </el-table-column>-->
          <el-table-column label="账号状态" width="155">
            <template v-slot="scope">
              {{ scope.row.status === '0' ? '已禁用' : '正常' }}
            </template>
          </el-table-column>

          <el-table-column
              prop="createTime"
              label="创建时间" width="160">
          </el-table-column>
          <el-table-column width="160"
              prop="updateTime"
              label="修改时间">
          </el-table-column>
          <el-table-column label="操作" >
            <template v-slot="scope">
              <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">审核</el-button>
              <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">注销用户</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div id="page">
        <!--      分页查询  :class="page_class"-->
        <el-pagination

            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="counts"
            :current-page.sync="page"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </div>
<!--    <div>-->
<!--      <Footer></Footer>-->
<!--    </div>-->
  </div>

</template>
<script>
import axios from 'axios'
import Banner from '../../components/Banner.vue'
// import Footer from '../../components/Footer.vue'
import Search from '../../components/Search.vue'
import {mapState,} from 'vuex'

export default {
  name: "EmployeePageAdmins",
  // components: {Banner, Footer, Search},
  components: {Banner, Search},
  data() {
    return {
      currentUser: {},
      tableData: [],
      page: 1,
      pageSize: 10,
      counts: 0,
      name:'',
    }
  },
  computed: {
    ...mapState(['user']),
  },
  methods: {
    likeName(){
      // console.log("绑定全局事件!")
      this.$bus.$on('likeEmployees',(data)=>{
        // console.log('我是Search组件,收到了数据',data)
        this.name=data;
        this.init();
      })
      // console.log("name:",this.name);
    },
    //显示的页数量
    handleSizeChange(val) {
      this.pageSize = val
      console.log("handleSizeChange===val",val);
      this.init()
    },
    //当前页第几页
    handleCurrentChange(val) {
      this.page = val;
      this.init()
    },
      init() {
      axios.get(`api/work/EmployyeePage?page=${this.page}&pageSize=${this.pageSize}&name=${this.name}`).then((res) => {
        console.log(res.data.data.total);
        this.counts=res.data.data.total;
        this.tableData = res.data.data.records;
        console.log(this.counts);

      }).catch(error => {
        console.log(error)
        return;
      })
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    }
  },
  mounted() {
    //全局事件绑定
    this.likeName();

    this.currentUser = this.user;
    this.init();
  },
  beforeDestroy() {
    //解绑事件,防止占用cpu
    this.$bus.$off('likeEmployees')
  },
}
</script>


<style scoped>
#Container {
  flex: fit-content;
  width: 100%;
  height: 100%;
  //height: 700px;

  background-color: steelblue;
  //background-image: url('../../assets/suilanbj.jpg');
  //background-size: cover;
  //background-repeat: no-repeat;
  //background-attachment: fixed; /* 可选，使背景图片固定不随页面滚动 */
  //background-position: center;
}

#tableDatas {
  //z-index: -1;
  //border: 1px solid black;
  //top: 100px;
  //position: fixed;
  width: 100%;
  //height: 100vh;
  //background:red ;
}

.page_class {
  background-color: white;
}

#page {

  margin: 0.5px auto;
  //width: 92.2%;
  width: 100%;
  //float: right;
  //margin-right: 70px;
  background-color: white;
}
</style>
